<!--  -->
<template>
  <div class="zhenzijinzhutu">
    <div class="zhutu2" ref="zhutu2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        title: {
          text: "各镇街道反馈处理柱状图",
          textStyle: {
            color: "#fff",
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["未处理建议", "已处理建议"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisLabel: {},
          },
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "未处理建议",
            type: "bar",
            stack: "广告",
            data: [],
            itemStyle: {
              normal: {
                color: "#fda07e",
              },
            },
          },
          {
            name: "已处理建议",
            type: "bar",
            stack: "广告",
            data: [],
            itemStyle: {
              normal: {
                color: "#37a2d8",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {},

  methods: {
    huoqushuju() {
      //获取当前日期
      var jintian = new Date();
      var nowY = jintian.getFullYear();
      var nowM = jintian.getMonth() + 1;
      var nowD = jintian.getDate();
      var enddate =
        nowY +
        "-" +
        (nowM < 10 ? "0" + nowM : nowM) +
        "-" +
        (nowD < 10 ? "0" + nowD : nowD); //当前日期

      //获取三十天前日期
      var jintianqian30 = new Date(jintian - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
      var lastY = jintianqian30.getFullYear();
      var lastM = jintianqian30.getMonth() + 1;
      var lastD = jintianqian30.getDate();
      var startdate =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD);
      // 请求开始
      let param = new URLSearchParams();
      param.append("time", startdate + "~" + enddate);

      this.$axios
        .post("/leader/feedback/qubingtu", param)
        .then((response) => {
          for (var i in response.data.data) {
            this.options.series[0].data.push(response.data.data[i].processed);
            this.options.series[1].data.push(response.data.data[i].untreated);
            this.options.xAxis[0].data.push(i.split("办事")[0]);
          }
          this.zhutu1();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    zhutu1() {
      var myChart = this.$echarts.init(this.$refs.zhutu2);
      var that = this;

      myChart.on("click", function (params) {
        if (params.name != null) {
          console.log(that.$router.push("/qunzongyijian"));
        }
      });
      myChart.setOption(this.options);
    },
  },
  created() {
    this.huoqushuju();
  },
};
</script>
<style lang='less' scoped>
.zhenzijinzhutu {
  height: 100%;
  padding: 15px;
}

.zhutu2 {
  height: 81%;
  padding: 0px;
}
</style>